<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            box-sizing: border-box;
            text-decoration: unset;
        }
        .dht{
            width: 100%;
            height: 80px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px;
           }
           .dhtimg{
            width: 25px;
           }
           .ljie{
            font-size: xx-small;
           }
           .bigimg{
            width: 100%;
            align-items: center;
            padding:10px;
           }
           .pipei{
            text-align: center;
            font-weight: 666;
           }
           div span{
            color: blue;
           }
           .biankx{
            border: 1px solid #ccc;
            margin: 20px;
           }
           /* 列表部分 */
           .liebiao{
            width: 100%;
            height: 60px;
            display: flex;
            text-align: center;
            margin: 10px;
           }
           .liebiaoimg{
            width: 60px;
           }
           p{
            font-size: x-small;
            margin: 8px;
            margin-right: 86px;
           }
           .pip{
            font-size: xx-small;
            margin: 8px;
            margin-right: 18px;
           }
           .liebaioxiaoimg{
             width: 30px;
             margin: 16px;
           }
    </style>
</head>
<body>
    <div>
    <!--导航条-->
    <div class="dht">
        <img src="./img/arrow-left.png" class="dhtimg">
        <h3>急速问诊</h3>
       <a href="xxxx" class="ljie"><span>问诊记录</span></a>
    </div>
    <!--bigimg-->
        <img src="./img/consult-fast.png" class="bigimg">
        <div class="pipei"><span>20s</span>快速匹配专业医生</div>
        <!--边框线-->
        <div class="biankx"></div>
    <!--列表-->
    <div class="liebiao">
        <img src="./img/doctor.png" alt="" class="liebiaoimg">
        <div>
            <p>三甲图文问诊</p>
            <p class="pip">三甲主治及以上级别医生</p>
        </div>
        <img src="./img/arrow-right.png" alt="" class="liebaioxiaoimg">
    </div>
    <div class="biankx"></div>
    <div class="liebiao">
        <img src="./img/message.png" alt="" class="liebiaoimg">
        <div>
            <p>普通图文问诊</p>
            <p class="pip">二甲主治及以上级别医生</p>
        </div>
        <img src="./img/arrow-right.png" alt="" class="liebaioxiaoimg">
    </div>
    </div>
</body>
</html>